<template>
  <div>
    <div class="header-container">
      <h1>我的足迹</h1>
      <div class="del-container">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <span class="in-select" @click="delSelect">删除选中</span>
      </div>
    </div>
    <div class="middle-container" />
    <div class="main-container">
      <div class="collect-list">
        <!-- checkList为选中的集合 -->
        <el-checkbox-group
          v-model="checkedOrders"
          @change="handleCheckedOrdersChange"
        >
          <!-- 动态生成foot-item -->
          <div class="foot-item">
            <div class="foot-time" style=" font-size: 12px;padding-bottom:5px;">
              2020/6/1
            </div>
            <div class="collect-item">
              <div class="txt" style=" font-size: 14px;">
                收货地址：广东省广州市天河区涌东路20号
              </div>
              <div class="goodes-list">
                <!-- 动态生成goodes-item -->
                <div class="goodes-item">
                  <!-- label一定要用v-bind,动态渲染生成的一定要：，而不是写死 -->
                  <!-- <el-checkbox class="single" :label="1"></el-checkbox> -->
                  <el-checkbox class="single"></el-checkbox>
                  <div @click="toDetail">
                    <img src="../../assets/images/steel.png" alt />
                    <div class="goodes-name" style=" font-size: 14px;">
                      <div class="name">钢管</div>
                    </div>
                    <div class="mark">
                      <span>标 号：</span>
                      <span
                        >外16内6.03标 号：外16内6.03标 号：外16内6.03...</span
                      >
                    </div>
                    <div class="goodes-price">￥166.00</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      checkedOrders: [],
      pageSize: 5,
      pageIndex: 1
    };
  },
  watch: {
    checkedOrders(newCheckedOrders) {
      console.log(newCheckedOrders);
    }
  },
  methods: {
    handleCheckAllChange(val) {
      // this.checkedOrders = val ? cityOptions : [];
      // this.isIndeterminate = false;
    },
    handleCheckedOrdersChange(value) {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    //页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      // this.loadPost();个数改变的时候再次调用请求
    },
    //页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      console.log(currentPage);
      this.pageIndex = currentPage;
      // this.loadPost();页码数改变的时候再次调用请求
    },
    delSelect() {},
    toDetail() {
      //带商品id参数跳转到详情页面.
      this.$router.push("/detail");
    }
  }
};
</script>

<style scoped lang="scss">
.el-pagination {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 20px;
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #ff3b30ff;
  border: 1px solid #ff3b30ff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  // background-color: #fff;
  border: 1px solid #ddddddff;
}
::v-deep .el-pagination.is-background .btn-prev {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-left:before {
  content: "上一页";
}
::v-deep .el-pagination.is-background .btn-next {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-right:before {
  content: "下一页";
}
.single {
  color: #000;
  position: absolute;
  top: -3px;
  left: 0px;
  z-index: 1000;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {

  background-color: #fff;
  border-color: #ff3b30;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after{
 border-color: #ff3b30;
}
::v-deep .el-checkbox__inner{
  border: 1px solid #ff3b30;
}
.header-container {
  height: 57px;
  background-color: #fff;
  padding: 18px 20px 18px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 20px;
  h1 {
    font-weight: 700;
    font-size: 16px;
  }
  .del-container {
    color: #02a9f1;
    font-size: 12px;
    .in-select {
      margin-left: 24px;
    }
    span:hover {
      cursor: pointer;
    }
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.main-container {
  padding: 20px;
  padding-bottom: 0;
  background-color: #fff;

  .collect-list {
    .foot-item {
      .collect-item {
        .txt {
          color: #6b6b6b !important;
          margin-bottom: 18px !important;
        }
        .goodes-list {
          display: flex;
          flex-wrap: wrap;
          .goodes-item {
            border: 1px solid #e5e5e5;
            width: 180px;
            height: 240px;
            margin-bottom: 20px;
            margin-right: 20px;
            position: relative;
            border: 1px solid #e5e5e5ff;
            overflow: hidden;
            img {
              width: 180px;
              height: 155px;
              object-fit: cover;
              margin-bottom: 13px;
            }
            .goodes-name {
              color: #3d3d3dff;
              font-weight: 700;
              margin-bottom: 3px;
              line-height: 20px;
              height: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
            }
            .mark {
              padding: 0 10px;
              font-size: 12px;
              height: 16px;
              display: flex;
              justify-content: start;
              span:nth-child(1) {
                color: #bdbdbf;
              }
              span:nth-child(2) {
                display: inline-block;
                color: #757575;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 80px;
              }
            }
            .goodes-price {
              padding: 0 10px;
              height: 21px;
              line-height: 21px;
              color: #ff3b30;
              font-size: 16px;
              margin-bottom: 11px;
            }
          }
          .goodes-item:nth-child(5n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
